<template>
  <view class="performance-container">
    <!-- 页面标题 -->
    <uni-nav-bar
      title="业务员业绩统计"
      :statusBar="true"
      background-color="#007AFF"
      color="#FFFFFF"
    />

    <!-- 业务员基本信息 -->
    <view class="businessman-info">
      <image
        src="/static/tabs/个人中心_sel.png"
        mode="aspectFill"
        class="avatar"
      />
      <text class="name">{{ businessman.name }}</text>
      <text class="department">{{ businessman.department }}</text>
      <text class="area">负责区域：{{ businessman.responsibleArea }}</text>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-cards">
      <!-- 分配设备数量 -->
      <view class="card">
        <text class="label">分配设备</text>
        <text class="value">{{ businessman.fenPeiTotal || 0 }}</text>
        <text class="unit">台</text>
      </view>

      <!-- 成交设备数量 -->
      <view class="card">
        <text class="label">成交设备</text>
        <text class="value">{{ businessman.chengJiaoTotal || 0 }}</text>
        <text class="unit">台</text>
      </view>

      <!-- 订单总金额 -->
      <view class="card">
        <text class="label">订单总额</text>
        <text class="value">{{ formatAmount(businessman.dingDanTotal) }}</text>
        <text class="unit">元</text>
      </view>

      <!-- 成单率 -->
      <view class="card">
        <text class="label">成单率</text>
        <text class="value" :style="{ color: chengDanColor }">
          {{ businessman.chengDan }}%
        </text>
        <text class="unit"></text>
      </view>
    </view>

    <!-- 补充信息 -->
    <view class="extra-info">
      <uni-list>
        <uni-list-item
          title="手机号"
          :rightText="businessman.phone"
        />
        <uni-list-item
          title="账号状态"
          :rightText="businessman.status === 1 ? '启用' : '禁用'"
          :color="businessman.status === 1 ? '#00AA00' : '#DD524D'"
        />
        <uni-list-item
          title="创建时间"
          :rightText="businessman.createTime"
        />
        <uni-list-item
          title="最后更新"
          :rightText="businessman.updateTime"
        />
      </uni-list>
    </view>

    <!-- 提示语 -->
    <view class="tip">
      <text>数据更新于 {{ new Date().toLocaleString() }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import type { Businessman } from '../../../types/Statistics'; // 假设你把接口定义在 types/businessman.ts 中

// 示例数据（实际项目中从 API 获取）
const exampleBusinessman: Businessman = {
  businessmanId: 1001,
  name: "张伟",
  operatorId: 2001,
  phone: "13800138000",
  password: "encrypted_password_abc123",
  department: "检测部",
  responsibleArea: "华东地区",
  status: 1,
  createTime: "2024-01-01 10:00:00",
  updateTime: "2024-10-01 15:30:00",
  fenPeiTotal: 89,
  chengJiaoTotal: 56,
  dingDanTotal: 1234567.89,
  chengDan: 62.9,
};

const businessman = ref<Businessman>(exampleBusinessman);

// 格式化金额（千分位）
const formatAmount = (amount: number | undefined): string => {
  if (!amount) return '0.00';
  return Number(amount).toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

// 成单率颜色动态显示
const chengDanColor = computed(() => {
  const rate = businessman.value.chengDan || 0;
  if (rate >= 70) return '#00AA00';   // 高于70%绿色
  if (rate >= 50) return '#FFB300';   // 中等黄色
  return '#DD524D';                   // 较低红色
});
</script>

<style scoped>
.performance-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 30px;
}

/* 头像与基本信息 */
.businessman-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #007AFF, #0056b3);
  color: white;
  border-radius: 0 0 20px 20px;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 10px;
}

.name {
  font-size: 20px;
  font-weight: bold;
}

.department {
  font-size: 14px;
  opacity: 0.9;
}

.area {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 4px;
}

/* 统计卡片布局 */
.stats-cards {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  margin: 0 15px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.label {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.value {
  font-size: 24px;
  font-weight: bold;
  color: #000;
}

.unit {
  font-size: 12px;
  color: #999;
}

/* 列表信息区 */
.extra-info {
  margin: 20px 15px;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 提示文字 */
.tip {
  text-align: center;
  font-size: 12px;
  color: #aaa;
  margin-top: 20px;
}
</style>